var mykey = {
    weather: 'efc89c3ffc8066e43ec72767c8d15d79' //改為你從OpenWeather獲取的API密鑰
  };
  var locationurl = 'https://extreme-ip-lookup.com/json/';
  var cityname = '';
  var weatherurl = '';
  var userip = '';
  var week = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
  
  fetch(locationurl)
    .then(data => data.json())
    .then(data => {
      //console.log(data);
      cityname = data.city;
      if (typeof data.city == "undefined") {
        cityname = data.region;
      };
      if (typeof data.region == "undefined") {
        cityname = data.country;
      };
      userip = data.query;
      weatherurl = 'https://api.openweathermap.org/data/2.5/weather/?q=' + cityname + '&units=metric&appid=' + mykey.weather;
      getweatherdata();
    })
    .catch(function(error) {
      console.log(error);
    });
  
  function getweatherdata() {
    fetch(weatherurl)
      .then(data => data.json())
      .then(data => {
        //console.log(data);
        clock.weatherimg = '/weather/icon/' + data.weather[0].icon + '.png';
        clock.temperature = data.main.temp + "*C";
        clock.humidity = data.main.humidity + "%";
        clock.ip = userip;
        clock.humidityimg = '/weather/icon/hu.png';
        clock.city = data.name;
        var timerID = setInterval(updateTime, 1000);
        updateTime();
        document.getElementById('clockload').style.display="none";
        document.getElementById('clockshow').style.display="table";
        function updateTime() {
          var cd = new Date();
          clock.time = zeroPadding(cd.getHours(), 2) + ':' + zeroPadding(cd.getMinutes(), 2) + ':' + zeroPadding(cd.getSeconds(), 2);
          clock.date = zeroPadding(cd.getFullYear(), 4) + '-' + zeroPadding(cd.getMonth() + 1, 2) + '-' + zeroPadding(cd.getDate(), 2) + ' ' + week[cd.getDay()];
          var hamorpm = cd.getHours();
          var str;
          if (hamorpm > 12) {
            hamorpm -= 12;
            str = " PM";
          } else {
            str = " AM";
          }
          clock.daylight = str
        };
  
        function zeroPadding(num, digit) {
          var zero = '';
          for (var i = 0; i < digit; i++) {
            zero += '0';
          }
          return (zero + num).slice(-digit);
        };
        updateTime();
      })
      .catch(function(error) {
        console.log(error);
      });
  };
  let clock = clockData({
    ip: '',
    time: '',
    weatherimg: '',
    temperature: '',
    humidityimg: '',
    humidity: '',
    usaqi: '',
    city: '',
    date: '',
    daylight: ''
  });
function clockData(data){
  const obj=document.getElementById('clock')
  Object.keys(data).forEach(function(item){
    Object.defineProperty(data,item, {
      get: function(v) {
        return data[item];
      },
      set: function(newVal) {
        let type='textContent',t=obj.querySelector('[data-'+type+'='+[item]+']')||(type='src')&&obj.querySelector('[data-'+type+'='+[item]+']')
        t&&(t[type]=newVal)
      }
    });
  })
  return data;
}
